<template>
  <div class="count-container">
    <Introduce title="计数组件">
        <template #introduce>
            封装countUp.js的计数组件
        </template>
    </Introduce>   
    <div class="count-content">
      <CountUp
        ref="count"
        :number="endNum"
        :start="startNum"
        :duration="time"
        prefix="$"
        className="count"
        :autoUp="false"
      />
      <div class="count-data">
        <span>起始值:</span>
        <el-input-number
          v-model="startNum"
          :min="0"
          size="small"
        ></el-input-number>
        <span>结束值:</span>
        <el-input-number
          v-model="endNum"
          :min="0"
          size="small"
        ></el-input-number>
        <span>时间:</span>
        <el-input-number v-model="time" :min="0" size="small"></el-input-number>
      </div>

      <div class="btn">
        <el-button type="primary" size="small" @click="startHandler">开始</el-button>
        <el-button type="warning" size="small" @click="resetHandler">重置</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import CountUp from "@/components/CountUp";
import { onMounted, ref } from "vue";
export default {
  components: { CountUp },
  setup() {
    const count = ref(null);

    let startNum = ref(0);
    let endNum = ref(100);
    let time = ref(2);
    let isPause = ref(false);
    onMounted(() => {});

    const startHandler = () => {
      count.value.startNum();
    };

    const resetHandler = () => {
      count.value.resetNum();
    };

    const toggleHandler = () => {
      count.value.pauseResume();
    };
    return {
      count,
      startNum,
      endNum,
      time,
      startHandler,
      resetHandler,
      toggleHandler,
      isPause,
    };
  },
};
</script>

<style lang="scss">
.count-container{
    .count-content {
        padding: 20px 0;
        background: #fff;
        .count-data {
            text-align: center;
            margin: 10px 0;
        }
        .btn {
            text-align: center;
            margin: 20px 0;
        }
    }
}

.count {
  text-align: center;
  font-size: 36px;
  font-weight: 600;
  color: #42b983;
}
</style>